<%-- 
   * 【描 述】：人员信息页面
   * 【环 境】：JAVA 1.7.0_13
   *  @author         柴志鹏  CHAIZP@GMAIL.COM
   *  @version        v1.0 2014-06-24
   *  @since          2014-06-24
 --%>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ include file="/include/head.jsp"%>

<html>
  <head>
    <title>人员信息</title>
    <script type="text/javascript">
    	Ext.onReady(function(){
    		Ext.QuickTips.init();
	    	Ext.form.Field.prototype.msgTarget = 'qtip';
	    	
	    	var viewport = new Ext.Viewport({
	    		layout: 'fit',
	    		items: [
	    			new GridPanel({
				        id: 'grid',
				        listeners: {
			        		resize: function(){
			        			var parentWidth = window.parent.document.body.clientWidth;//父窗口宽度
			        			if(document.body.clientWidth == parentWidth) {//当最大化时将全部列显示
			        				this.isColumnVisible(this, false);
			        			} else {
			        				this.isColumnVisible(this, true);
			        			}
			        		},
			        		afteredit: function(e) {
			        			var record = e.record;
					       		if (record.get('cudType') == undefined || record.get('cudType') == '') {
					       			record.data['cudType'] = 'U';
					       		}
								record.dirty = true;
								record.modified = e.record;
								if (this.getStore().modified.indexOf(record) == -1) {
									this.getStore().modified.push(record);
								}
			        		}
			        	},
			        	tbar: [
			        		{
			        			text: '新增',
			        			iconCls: 'addBtn',
			        			handler: function() {
			        				var RecordSet = Ext.data.Record.create([
							    	   {name: 'cudType'},
							    	   {name: 'id'},
							    	   {name: 'personCode'},
							    	   {name: 'personName'},
							    	   {name: 'sex'},
							    	   {name: 'birthday'},
							    	   {name: 'height'},
							    	   {name: 'weight'},
							    	   {name: 'waistline'},
							    	   {name: 'shirtSize'},
							    	   {name: 'necklineSize'},
							    	   {name: 'shoeSize'},
							    	   {name: 'email'},
							    	   {name: 'mobile'},
							    	   {name: 'insideNum'}
								    ]);
						    		var recordSet = new RecordSet({
					            		cudType: 'C',
					            		id: '',
					            		personCode: '',
					            		personName: '',
					            		sex: '1',
					            		birthday: '',
					            		height: '',
					            		weight: '',
					            		waistline: '',
					            		shirtSize: '',
					            		necklineSize: '',
					            		shoeSize: '',
					            		email: '',
					            		mobile: '',
					            		insideNum: ''
					            	});
						    		
						    		var grid = Ext.getCmp('grid');
					            	grid.stopEditing();
									grid.getStore().insert(0, recordSet);
									grid.startEditing(0, 4);
									for(var i = 0; i < grid.getStore().getCount(); i++){ //使RowNumberer加1
										if(Ext.isIE) {
											grid.getView().getCell(i, grid.getColumnModel().getIndexById('rownum')).firstChild.innerText = i + 1;
										} else {
											grid.getView().getCell(i, grid.getColumnModel().getIndexById('rownum')).firstChild.textContent = i + 1;
										}
									}
									grid.getSelectionModel().selectFirstRow();
			        			}
			        		},{
			        			text: '删除',
			        			iconCls: 'deleteBtn',
			        			handler: function() {
			        				var grid = Ext.getCmp('grid');
						    		var records = grid.getSelectionModel().getSelections();
						    		if(records.length > 0) {
					                    for (var i = 0, len = records.length; i < len; i++) {
								       		records[i].data['cudType'] = 'D';	                    
						                    if (grid.getStore().modified.indexOf(records[i]) == -1)
						                   		grid.getStore().modified.push(records[i]);
					                        grid.getStore().remove(records[i]);
					                    }	            	
					            	} else {
					            		Ext.MessageBox.alert('提示', '请选择要删除的记录.');
					            	}
			        			}
			        		},{
			        			text: '保存',
			        			iconCls: 'saveBtn',
			        			handler: function() {
			        				var grid = Ext.getCmp('grid');
			        				var records = grid.getStore().getModifiedRecords();
							        if (records.length > 0) {
							        	if(!cf_validateGrid(grid, grid.getColumnModel(), ['personName']))
											return;
								        Ext.MessageBox.confirm('提示', '确认保存?',
											function(btn) {
											    if(btn == BUTTON_YES) {
											    	cf_ShowMessageBox('保存中..');
											        var data = "[";
											        for (var i = 0, len = records.length; i < len; i++){
											            data = data + "{cudType:'" + records[i].get('cudType') +
										            		"', id:'" + records[i].get('id') + 
										            		"', personCode:'" + records[i].get('personCode') + 
										            		"', personName:'" + records[i].get('personName') + 
										            		"', sex:'" + records[i].get('sex') + 
										            		"', birthday:'" + records[i].get('birthday') + 
										            		"', height:'" + records[i].get('height') + 
										            		"', weight:'" + records[i].get('weight') + 
										            		"', shirtSize:'" + records[i].get('shirtSize') + 
										            		"', necklineSize:'" + records[i].get('necklineSize') + 
										            		"', shoeSize:'" + records[i].get('shoeSize') + 
										            		"', email:'" + records[i].get('email') + 
										            		"', mobile:'" + records[i].get('mobile') + 
										            		"', insideNum:'" + records[i].get('insideNum') + 
										            		"'}";
											            if (i < len - 1) {data = data + ",";}
											        }
													data = data + "]";
													
													Ext.Ajax.request({
														url: 'PersonAction!personController.do',
														method: 'POST',
														params: {jsonData: data},
														success: function (result, request) {
															Ext.MessageBox.alert('提示', '操作成功!',
																function(btn) {
																	refresh(grid.getStore());
																}
															);
														},
														failure: function (result, request) {
															Ext.MessageBox.alert('提示', '操作失败!');
											            }
													});
									         	}
											}
								        );
							        } else {
							            Ext.MessageBox.alert('提示', '没有任何数据改变.');
							            return false;			        
							        }
			        			}
			        		},'->','姓名',
			        		new Ext.form.ComboBox({
							    store: new Ext.data.JsonStore({
									url:'PersonAction!getPersonName.do',
								    fields: [
								             {name: 'id'},
								             {name: 'personName'}
								        ]
								    }),
								triggerAction: 'all',//请设置为”all”,否则默认 为”query”
							    displayField: 'personName',
							    hiddenName: 'id',
							    queryParam: 'personName',
							    valueField: 'id',
							    typeAhead: false,
							    hideTrigger: true,//下拉按钮
							    emptyText: '搜索资源...',
							    width: 190,
							    model: 'remote', 
							    minChars: 2,//输入几个字符开始搜索 
							    selectOnFocus: true,
							    listeners: {
			        				select: function(combo, record, index) {
			        					var name = this.getRawValue().replace(/(^\s*)|(\s*$)/g, "");//去前后空格
								    	var store = Ext.getCmp('grid').getStore();
								        store.reload({
								        	params: {
								        		start: PAGING_START_INDEX,
												limit: PAGING_PAGE_SIZE,
								        		personName: name
								        	}
								    	});
			        				}
							    }
							}),'-',
				        	new Ext.form.TwinTriggerField({
							    trigger1Class: 'x-form-clear-trigger',
							    trigger2Class: 'x-form-search-trigger',
							    hideTrigger1: true,
							    autoWidth: true,
							    listeners: {
							        'specialkey': function(f, e){
							        	if(e.getKey() == e.ENTER){
							            	this.onTrigger2Click();
							        	}
							    	}
							 	},
							 	onTrigger1Click:function(){
							    	this.setRawValue('');
							     	this.triggers[0].hide();
							    	return false;
							 	},
							 	onTrigger2Click:function(){
							    	var name = this.getRawValue().replace(/(^\s*)|(\s*$)/g, "");//去前后空格
						        	this.triggers[0].show();
							    	var store = Ext.getCmp('grid').getStore();
							        store.reload({
							        	params: {
							        		start: PAGING_START_INDEX,
											limit: PAGING_PAGE_SIZE,
							        		personName: name
							        	}
							    	});
								}
							})
			        	]
	    			})
	    		]
	    	});
	    	
    	});
    	
    	var GridPanel = Ext.extend(Ext.grid.EditorGridPanel, {
    		constructor: function(config) {
    			var store = new Ext.data.Store({//角色数据源
					proxy: new Ext.data.HttpProxy({
						url: 'PersonAction!getPersonList.do'
					}),
					reader: new Ext.data.JsonReader({
						totalProperty: 'total',
						root: 'list'
					}, new Ext.data.Record.create([
						{name: 'cudType'},
						{name: 'id'},
						{name: 'personCode'},
						{name: 'personName'},
						{name: 'sex'},
						{name: 'birthday'},
						{name: 'height'},
						{name: 'weight'},
						{name: 'waistline'},
						{name: 'shirtSize'},
						{name: 'necklineSize'},
						{name: 'email'},
						{name: 'mobile'},
						{name: 'insideNum'}
					])),
					remoteSort: false,//是否远程排序
					autoLoad: {
						params:{
							start: PAGING_START_INDEX,
							limit: PAGING_PAGE_SIZE
						}
					}
				});
		    	
		    	var model = new Ext.grid.CheckboxSelectionModel();
		    	var column = new Ext.grid.ColumnModel({
		    		id: 'column',
		    		defaults: {
		    			sortable: true,//默认全部列可排序
		    			align: 'center'
		    		},
		    		columns: [
		    			model,
		    			new Ext.grid.RowNumberer({
		    				id: 'rownum',
		    				header: '序号',
		    				width: 40
		    			}),{
		    				id: 'id',
		    				header: '主键Id',
		    				dataIndex: 'id',
		    				width: 50,
		    				hidden: true
		    			},{
		    				id: 'personCode',
		    				header: '编号',
		    				dataIndex: 'personCode',
		    				width: 70,
		    				editor: new Ext.form.TextField()
		    			},{
		    				id: 'personName',
		    				header: cf_getRequiredItem('姓名'),
		    				dataIndex: 'personName',
		    				width: 50,
		    				editor: new Ext.form.TextField({
		    					allowBlank: false,
		    					blankText: '必填项不可为空',
		    					regex: /^[\u4E00-\u9FA5]+$/,
								regexText: '格式错误-示例:开发者'
		    				})
		    			},{
		    				id: 'sex',
		    				header: '性别',
		    				dataIndex: 'sex',
		    				width: 40,
		    				editor: new Ext.form.ComboBox({
								typeAhead: true,
								editable: false,
								store: new Ext.data.SimpleStore({
									fields: ['code', 'value'],
									data:[['1','男'],['0','女']]
								}),
								displayField: 'value',
								valueField: 'code',               
								triggerAction: 'all',
								mode: 'local'
				        	}),
				        	renderer: function(value, cellmeta, record) {
				        		if(value){
				        			var editor = this.getEditor();
									var index = editor.getStore().find(editor.valueField, value);
									var record = editor.getStore().getAt(index); 
									return record.data.value;
								}
				        	}
		    			},{
		    				id: 'birthday',
		    				header: '生日',
		    				dataIndex: 'birthday',
		    				width: 80,
		    				renderer: Ext.util.Format.dateRenderer(SHORT_DATE_FORMAT),
		    				editor: new Ext.form.DateField({// 日期的编辑框 
								format: SHORT_DATE_FORMAT
							}),
		    				hidden: true
		    			},{
		    				id: 'height',
		    				header: '身高(cm)',
		    				dataIndex: 'height',
		    				width: 30,
		    				editor: new Ext.form.TextField({
		    					regex: /^[1-2]\d{2}$/,
								regexText: '格式错误-示例:182'
		    				}),
		    				hidden: true
		    			},{
		    				id: 'weight',
		    				header: '体重(kg)',
		    				dataIndex: 'weight',
		    				width: 30,
		    				hidden: true
		    			},{
		    				id: 'waistline',
		    				header: '腰围(尺)',
		    				dataIndex: 'waistline',
		    				width: 30,
		    				editor: new Ext.form.TextField(),
		    				hidden: true
		    			},{
		    				id: 'shirtSize',
		    				header: '衬衫尺寸',
		    				dataIndex: 'shirtSize',
		    				width: 60,
		    				editor: new Ext.form.TextField(),
		    				hidden: true
		    			},{
		    				id: 'necklineSize',
		    				header: '领口尺寸',
		    				dataIndex: 'necklineSize',
		    				width: 60,
		    				editor: new Ext.form.TextField(),
		    				hidden: true
		    			},{
		    				id: 'email',
		    				header: '邮箱',
		    				dataIndex: 'email',
		    				width: 100,
		    				editor: new Ext.form.TextField({
		    					regex: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
								regexText: '非邮箱格式-示例:admin@czp.com'
		    				}),
		    				hidden: true
		    			},{
		    				id: 'mobile',
		    				header: '移动电话',
		    				dataIndex: 'mobile',
		    				width: 80,
		    				editor: new Ext.form.TextField({
		    					regex: /^1[3|4|5|7|8][0-9]\d{8}$/,
		    					regexText: '非手机号码-示例:13999999999'
		    				})
		    			},{
		    				id: 'insideNum',
		    				header: '内线号',
		    				dataIndex: 'insideNum',
		    				width: 50,
		    				editor: new Ext.form.TextField()
		    			}
		    		]
		    	});
    			
		        config = Ext.apply({
		            id: this.id,
			        autoScroll: true,
				    store: store,
				    cm: column,
				    sm: model,
				    frame: false,
				    trackMouseOver: true,//鼠标经过痕迹
				    loadMask: true,
		        	loadMask: {msg: 'loading...'},
		        	viewConfig: {
		        		forceFit: true,//根据column进行百分比设置
		        		scrollOffset: 0//不加这个的话，会在grid的最右边有个空白，留作滚动条的位置。若不加默认为scrollOffset: 20
		        	},
		        	bbar: cf_getPagingToolbar(PAGING_PAGE_SIZE, store)
		        }, config);
		        GridPanel.superclass.constructor.call(this, config);
		    },
		    isColumnVisible: function(grid, isVis) {
		    	grid.getColumnModel().setHidden(6, isVis);
	   			grid.getColumnModel().setHidden(7, isVis);
	   			grid.getColumnModel().setHidden(8, isVis);
	   			grid.getColumnModel().setHidden(9, isVis);
	   			grid.getColumnModel().setHidden(10, isVis);
	   			grid.getColumnModel().setHidden(11, isVis);
	   			grid.getColumnModel().setHidden(12, isVis);
		    }
    	});
    	
    	function refresh(store) {
	    	store.modified = [];
           	store.removeAll();
  			store.reload();
	    }
    </script>
  </head>
  
  <body>
    <div id="personInfo"></div>
  </body>
</html>
